<template>
  <el-dialog
    v-model="dialogUIDatas.dialogVisible"
    :title="dialogUIDatas.dialogTitle"
    width="80%"
    top="10vh"
  >
    <div v-loading="dialogUIDatas.loading">
      <div style="height:60vh;border:1px solid #b1b3b8">
        <el-auto-resizer>
          <template #default="{ height, width }">
            <el-table-v2
              :columns="dialogUIDatas.tableUIDatas.columns"
              :data="dialogUIDatas.tableUIDatas.tableDatas"
              :height="height"
              :width="width"
            ></el-table-v2>
          </template>
        </el-auto-resizer>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="buttonClicks.cancelBtnClick">取消</el-button>
        <el-button
          type="primary"
          @click="buttonClicks.confirmBtnClick"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'DataTableDailog',
  props: {
    confirmBtnClick: Function,
    cancelBtnClick: Function,
  },
  setup (props) {
    let dialogUIDatas = reactive({
      dialogVisible: false,
      dialogTitle: '标题',
      loading: false,
      tableUIDatas: {
        tableDatas: [],
        columns: []
      }
    });

    let showTableDialog = function (title, tableUIDatas) {
      dialogUIDatas.dialogTitle = title;
      dialogUIDatas.tableUIDatas = tableUIDatas;
      dialogUIDatas.dialogVisible = true;
      console.log('tableUIDatas :>> ', tableUIDatas);
    };

    let closeTableDialog = function () {
      dialogUIDatas.dialogVisible = false;
    };
    let confirmBtnClick = function () {
      if (props.confirmBtnClick) {
        dialogUIDatas.loading = true;
        props.confirmBtnClick(dialogUIDatas);
      }
      else {
        dialogUIDatas.loading = false;
        dialogUIDatas.dialogVisible = false;
      }
    };
    let cancelBtnClick = function () {
      if (props.cancelBtnClick) {
        props.cancelBtnClick();
      }
      else {
        dialogUIDatas.dialogVisible = false;
      }
    };
    let buttonClicks = {
      confirmBtnClick,
      cancelBtnClick
    };
    return {
      dialogUIDatas, buttonClicks,
      showTableDialog, closeTableDialog
    };
  }
}
</script>

<style>
</style>